Exercises

Click the ball

Let's build a simple game!

In the playground below, a ball moves around randomly. The goal of the game is to click the ball. We want to show an alert when the ball is successfully clicked:

We can use window.alert() to show the message.

Acceptance Criteria:

When the user clicks the ball, a winning message should be shown.
You should handle “click” events specifically, as this event is triggered on click, on tap, and even when the user focuses the element with the keyboard and hits the “Enter” key.
- If you don't use a pointer device, you can use the keyboard method to test your code.

NOTE: If you find the ball movement distracting, you can disable it. Pop over to the CSS tab and comment out the first chunk of CSS.

Code Playground

import React from 'react';

import VisuallyHidden from './VisuallyHidden';

function ClickBallGame() {

return (

<button

className="ball"

Ball

</VisuallyHidden>

</button>

</div>

);

}

export default ClickBallGame;

Solution:

Click the ball v2

Let's make our game a bit more interesting.

In addition to the ball, it now features a bomb. If the bomb is clicked, we want to show a "lose" message:

Below, you'll find a mostly-complete implementation, but there's a problem. Clicking either item—bomb or ball—shows the “lose” message.

Your mission is to fix the code below so that it shows the right message depending on which item is clicked.

Acceptance Criteria:

When the user clicks the ball, a winning message should be shown.
When the user clicks the bomb, a losing message should be shown.
The handleClick function should still be used, and you shouldn't have to change anything about the function itself.

Once again, you can comment out the first chunk of CSS to disable the movement.

Code Playground

import React from 'react';

import VisuallyHidden from './VisuallyHidden';

function ClickBallGame() {

function handleClick(type) {

if (type === 'win') {

alert('You win!');

} else {

alert('You lose :(');

}

return (

<button

className="ball"

onClick={handleClick}

Ball

</VisuallyHidden>

</button>

<button

className="bomb"

onClick={handleClick}

<span

role="img"

aria-label="bomb"

💣

</span>

</button>

</div>

);

}

export default ClickBallGame;

Solution:

Do we need to pass the “lose” argument? (warning)

Several students have pointed out that the type isn't strictly necessary for the bomb button.

Instead of doing this…

<button
  className="bomb"
  onClick={() => handleClick('lose')}
>

…we can do this:

<button
  className="bomb"
  onClick={handleClick}
>

Our handleClick function, after all, only checks for "win", it doesn't check for "lose":

function handleClick(type) {
  if (type === 'win') {
    alert('You win!');
  } else {
    alert('You lose :(');
  }
}

But just because we can omit the argument, should we?

Here's a question for you: in this new version of the code, what do you suppose type will be assigned to, within the handleClick function?

function handleClick(type) {
  console.log(type);
  // What will this log, when we click the bomb?
}

Think about it for a second, and then expand:

It should be undefined, right? Since we aren't giving it a value?

Actually, it'll be a SyntheticBaseEvent object:

This happens because React is the one calling our handleClick function for us, when the button is clicked. It provides this gnarly “event” object, which contains a bunch of metadata about the click that just occurred.

We'll learn more about events shortly. For now, though, let's consider our choices for how to structure our code. We can choose between:

A type parameter that will either be "win" or "lose".
A type parameter that will either be "win" or SyntheticBaseEvent { altKey: false, bubbles: true, button: 0, buttons: 0, ...}.

It's important to remember that we're not only writing code for the computer, we're also writing code for other humans, and for our future selves. It's not sufficient for the code to work, I also want it to be consistent, unsurprising, and semantically intelligible.